<template>
  <el-button type="primary" @click="goBack" style="margin-bottom: 16px;">返回</el-button>
  <div class="patrol-record-detail">
    <div class="search-bar">
      <el-input v-model="searchName" placeholder="巡查人" style="width: 200px; margin-right: 10px;" disabled />
      <el-date-picker v-model="dateRange" type="daterange" range-separator="~" start-placeholder="巡查日期" end-placeholder="巡查日期" style="margin-right: 10px;" />
      <el-button type="primary" @click="handleSearch">查询</el-button>
      <el-button @click="handleReset">重置</el-button>
    </div>
    <div style="margin: 10px 0;">
      查询结果：共计 {{ total }} 条数据
    </div>
    <el-table :data="tableData" :loading="loading" style="width: 100%;">
      <el-table-column prop="realName" label="巡查人" />
      <el-table-column prop="startTime" label="开始时间" />
      <el-table-column prop="endTime" label="结束时间" />
      <el-table-column prop="source" label="巡查来源" />
      <el-table-column prop="distance" label="距离（米）" />
      <el-table-column prop="duration" label="巡查时长">
        <template #default="scope">
          {{ formatDuration(scope.row.duration) }}
        </template>
      </el-table-column>
      <el-table-column prop="signCount" label="签到记录">
        <template #default="scope">
          <el-link type="primary" @click="goSignLog(scope.row)">{{ scope.row.signCount }}</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="prev, pager, next, jumper"
      style="margin-top: 20px; text-align: right;"
      @current-change="fetchData"
    />
    <el-dialog v-model="signLogDialogVisible" title="签到记录" width="500px">
      <el-table :data="signLogList" border>
        <el-table-column prop="signPointName" label="签到点" />
        <el-table-column label="签到状态">
          <template #default="scope">
            <span :style="{color: scope.row.status === 1 ? 'green' : 'red'}">
              {{ scope.row.status === 1 ? '已签到' : '未签到' }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button @click="signLogDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { fetchPatrolRecordDetail, fetchSignLog } from '@/api/patrolRecord'

const route = useRoute()
const router = useRouter()
const inspectorId = ref(route.query.inspectorId)
const searchName = ref(route.query.realName || '')
const dateRange = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const tableData = ref([])
const loading = ref(false)

const signLogDialogVisible = ref(false)
const signLogList = ref([])

function goBack() {
  router.back()
}

async function goSignLog(row) {
  const res = await fetchSignLog({ recordId: row.id })
  signLogList.value = res.data?.data || []
  signLogDialogVisible.value = true
}

const fetchData = async () => {
  loading.value = true
  try {
    const params = {
      inspectorId: inspectorId.value,
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      startDate: dateRange.value?.[0],
      endDate: dateRange.value?.[1]
    }
    const res = await fetchPatrolRecordDetail(params)
    tableData.value = res.data?.data?.records || []
    total.value = res.data?.data?.total || 0
    console.log('tableData', tableData.value)
  } finally {
    loading.value = false
  }
}

function handleSearch() {
  currentPage.value = 1
  fetchData()
}
function handleReset() {
  dateRange.value = []
  currentPage.value = 1
  fetchData()
}
function formatDuration(seconds) {
  if (!seconds) return '0秒'
  const h = Math.floor(seconds / 3600)
  const m = Math.floor((seconds % 3600) / 60)
  const s = seconds % 60
  return `${h ? h + '时' : ''}${m ? m + '分' : ''}${s ? s + '秒' : ''}`
}

onMounted(fetchData)
</script>

<style scoped>
.patrol-record-detail {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
}
.search-bar {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
</style>
